import React, { useEffect, useState } from 'react';
import { Tabs, Row, Col, DatePicker } from 'antd';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { router } from 'umi';
import moment from 'moment';
import styles from './details.less';
import { handlerMatomoEvent } from '@/utils/matomo';
import SmallCard from './components/SmallCard';
import OrgContent from './components/OrgContent';
import PageEmpty from '@/components/PageEmpty';
import TreeSearch from './components/TreeSearch';

const { TabPane } = Tabs;
const Tags = props => {
  const { dispatch, reduxItem } = props;
  const { orgIds, getTree } = reduxItem;

  // 实时获取路由中的参数赋给tab key值
  const getTabsChangeKey = key => {
    // 获取点击key 并跳转对应的路由
    router.push(`/MonitoringConsole/${key}`);
    dispatch({
      type: 'MonitoringConsole/getOrgIds',
      payload: {
        orgIds: {
          ...orgIds,
          page: key,
        },
        getTree,
      },
    });
  };

  return (
    <div className="xh-tab1">
      <Tabs size="large" activeKey={orgIds.page} onChange={getTabsChangeKey} animated={false}>
        <TabPane tab="储" key="store" />
        <TabPane tab="产" key="product" />
        <TabPane tab="供" key="supply" />
        <TabPane tab="销" key="sale" />
        <TabPane tab="存" key="deposit" />
        <TabPane tab="结" key="finish" />
        <TabPane tab="回" key="return" />
      </Tabs>
    </div>
  );
};

const Details = props => {
  const { dispatch, reduxItem, match } = props;
  const { detailsItems, orgIds, getTree, storeSaleRateData } = reduxItem;
  const [tabsKeys, setTabsKeys] = useState('1');
  // 监控台 详情埋点
  useEffect(() => {
    let tabName = '';
    if (match.params.page === 'store') tabName = '储';
    if (match.params.page === 'product') tabName = '产';
    if (match.params.page === 'supply') tabName = '供';
    if (match.params.page === 'sale') tabName = '销';
    if (match.params.page === 'deposit') tabName = '存';
    if (match.params.page === 'finish') tabName = '结';
    if (match.params.page === 'return') tabName = '回';
    const params = {
      category: 'Page',
      action: `监控台-${tabName}-详情`,
      name: `监控台-${tabName}-详情`,
    };
    handlerMatomoEvent(params);
  }, [match.params.page]);

  useEffect(() => {
    if (Object.keys(orgIds).length > 0) {
      const { orgdepid, hrOrgTypeId, yearMonth, page } = orgIds;
      dispatch({
        type: 'MonitoringConsole/requestDetalsinit',
        payload: {
          params: {
            hrOrgTypeId,
            orgId: orgdepid,
            reportDate: yearMonth,
          },
        },
      });
      if (page === 'deposit') {
        dispatch({
          type: 'MonitoringConsole/getStoreSaleRate',
          payload: {
            params: {
              hrOrgTypeId,
              orgId: orgdepid,
              reportDate: yearMonth,
            },
          },
        });
      }
    } else {
      router.push('/MonitoringConsole');
    }
  }, [orgIds]);

  const handlerWarningText = type => {
    if (type === 1) {
      if (reduxItem.orgIds.hrOrgTypeId === '11') return '集团';
      if (reduxItem.orgIds.hrOrgTypeId === '20') return '区域';
      if (reduxItem.orgIds.hrOrgTypeId === '21' || orgIds.hrOrgTypeId === '23') return '城市公司';
      if (reduxItem.orgIds.hrOrgTypeId === '31') return '项目';
    } else if (type === 2) {
      if (reduxItem.orgIds.hrOrgTypeId === '11') return '区域';
      if (reduxItem.orgIds.hrOrgTypeId === '20') return '城市公司';
      if (reduxItem.orgIds.hrOrgTypeId === '21' || orgIds.hrOrgTypeId === '23') return '项目';
    }
    return '';
  };

  const handlerTabs = key => {
    setTabsKeys(key);
    if (match.params.page === 'deposit' && key === '2') {
      const { orgdepid, hrOrgTypeId, yearMonth } = orgIds;
      dispatch({
        type: 'MonitoringConsole/getStoreSaleRate',
        payload: {
          params: {
            hrOrgTypeId,
            orgId: orgdepid,
            reportDate: yearMonth,
          },
        },
      });
    }
  };

  const handlerYearMonth = date => {
    dispatch({
      type: 'MonitoringConsole/getOrgIds',
      payload: {
        orgIds: {
          ...orgIds,
          yearMonth: moment(date).format('YYYYMM'),
        },
        getTree,
      },
    });
  };
  return (
    <PageHeaderWrapper
      className={styles.monitoringConsoleDetails}
      breadcrumb={null}
      title={<TreeSearch {...props} />}
      tags={<Tags {...props} />}
      extra={
        <>
          截至年月：
          <DatePicker.MonthPicker
            allowClear={false}
            onChange={date => handlerYearMonth(date)}
            format="YYYY-MM"
            value={moment(orgIds.yearMonth, 'YYYY-MM')}
            disabledDate={current => current && current > moment().endOf('day')}
          />
        </>
      }
    >
      {detailsItems.length <= 0 ? (
        <div style={{ marginTop: '50px' }}>
          <PageEmpty emptyTitle="加载中..." />
        </div>
      ) : (
        <>
          <Row className="title" type="flex" gutter={[30, 10]}>
            {match.params.page !== 'deposit' && <Col>{`${handlerWarningText(1)}指标监控`}</Col>}
            {match.params.page === 'deposit' && (
              <Tabs
                size="small"
                className="xh-tab2"
                animated={false}
                onChange={handlerTabs}
                activeKey={tabsKeys}
              >
                <TabPane tab={`${handlerWarningText(1)}指标监控`} key="1" />
                <TabPane tab="存销比" key="2" />
              </Tabs>
            )}
          </Row>
          <SmallCard
            detailsItems={detailsItems}
            storeSaleRateData={storeSaleRateData}
            orgIds={orgIds}
            tabsKeys={tabsKeys}
          />
          {reduxItem.orgIds.hrOrgTypeId !== '31' ? (
            <>
              <Row
                type="flex"
                align="bottom"
                justify="space-between"
                className="title"
                style={{ margin: '10px 10px 0 0' }}
              >
                <Col className="font-size14">{handlerWarningText(2)}指标监控</Col>
                <Col>
                  <span>
                    <span className="font-size12">预警标准</span>
                    <span className="dots" style={{ background: '#F5212D' }}></span>
                  </span>
                  &nbsp;&nbsp;&nbsp;
                  <span>
                    <span className="font-size12">提醒标准</span>
                    <span className="dots" style={{ background: '#FBAF1D' }}></span>
                  </span>
                  &nbsp;&nbsp;&nbsp;
                  <span>
                    <span className="font-size12">健康标准</span>
                    <span className="dots" style={{ background: '#52C41A' }}></span>
                  </span>
                </Col>
              </Row>
              <OrgContent {...props} />
            </>
          ) : null}
        </>
      )}
    </PageHeaderWrapper>
  );
};

export default connect(state => ({
  reduxItem: state.MonitoringConsole,
}))(Details);
